<template>
  <!-- 登录 -->
  <view v-if="isLogin" class="login">
    <view class="contant">
      <uni-forms ref="loginForm" :modelValue="userLogin" label-position="left" :rules="formRules">
        <uni-forms-item label="用户名称" name="userName">
          <uni-easyinput v-model="userLogin.userName" placeholder="请输入账号" />
        </uni-forms-item>
        <uni-forms-item label="用户密码" name="passWord">
          <uni-easyinput type="password" v-model="userLogin.passWord" placeholder="请输入密码" />
        </uni-forms-item>
      </uni-forms>
      <view class="btns">
        <button plain class="btn-item" @click="isLogin = !isLogin">去注册</button>
        <button type="primary" plain class="btn-item" @click="submit">登录</button>
      </view>
    </view>
  </view>

  <!-- 注册 -->
  <view v-else class="login">
    <view class="contant">
      <uni-forms ref="registerForm" :modelValue="userLogin" label-position="left" :rules="formRules">
        <uni-forms-item label="用户名称" name="userName">
          <uni-easyinput v-model="userLogin.userName" placeholder="请输入账号" />
        </uni-forms-item>
        <uni-forms-item label="用户密码" name="passWord">
          <uni-easyinput v-model="userLogin.passWord" type="password" placeholder="请输入密码" />
        </uni-forms-item>
        <uni-forms-item label="确认密码" name="confirmPassword">
          <uni-easyinput v-model="userLogin.confirmPassword" type="password" placeholder="请再次输入密码" />
        </uni-forms-item>
      </uni-forms>
      <view class="btns">
        <button type="primary" plain class="btn-item" @click="register">注册</button>
        <button plain class="btn-item" @click="isLogin = !isLogin">去登录</button>
      </view>
    </view>
  </view>

</template>

<script>
  import Vue from 'vue'
  export default {
    name: "login",
    props: ['userLoginData'],
    data() {
      return {
        userLogin: this.userLoginData,
        isLogin: true,
        // 表单验证规则
        formRules: {
          userName: {
            rules: [{
                required: true,
                errorMessage: '请输入用户名'
              },
              {
                minLength: 2,
                maxLength: 8,
                errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
              }
            ]
          },
          passWord: {
            rules: [{
                required: true,
                errorMessage: '请输入密码'
              },
              {
                minLength: 6,
                maxLength: 12,
                errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
              }
            ]
          },
          confirmPassword: {
            rules: [{
                required: true,
                errorMessage: '请再次输入密码',
              },
              {
                minLength: 6,
                maxLength: 12,
                errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
              },
              {
                validateFunction: function(rule, value, data, callback) {
                  let pages = getCurrentPages();
                  let pass = pages[pages.length - 1].userLoginData.passWord
                  if (value !== pass) {
                    callback('两次输入密码不一致')
                  }
                  return true
                }
              }
            ],
          }
        },
      };
    },
    mounted() {
      Vue.set(this.userLogin, 'confirmPassword', '1234567')
    },
    onReady() {
      // 设置自定义表单校验规则，必须在节点渲染完毕后执行
      this.$refs.customForm.setRules(this.formRules)
    },
    methods: {
      // 退出登录
      signOut() {
        uni.showModal({
          content: "是否退出登录？",
          success: res => {
            if (res.confirm) {
              this.token = ''
              this.userData = {}
              try {
                uni.removeStorageSync('token');
              } catch (e) {}
            }
          }
        })
        try {
          uni.removeStorageSync('token');
        } catch (e) {
          throw e
        }
      },
      submit() {
        this.$refs.loginForm.validate((err, value) => {
          if (!err) {
            delete this.userLogin.confirmPassword
            this.$emit('submit', this.userLogin)
          }
        })
      },
      // 用户注册
      register() {
        this.$refs.registerForm.validate((err, value) => {
          if (!err) {
            delete this.userLogin.confirmPassword
            this.$emit('addUser', this.userLogin)
          }
        })
      }

    }
  }
</script>

<style lang="scss" scoped>
  .login {
    position: relative;
    width: 100%;
    height: 100%;

    .contant {
      position: absolute;
      top: 145px;
      left: 1%;
      background-color: #fff;
      width: 98%;
      padding-bottom: 20rpx;
      border-radius: 20rpx;
      border: 2rpx solid #00ffff;

    }
  }

  .uni-forms {
    width: 100%;
    padding: 10px;

    &-item {
      width: 90%;
    }

    /deep/.uni-forms-item__label {
      width: 80px !important;
    }
  }

  .btns {
    display: flex;
    justify-content: center;
  }

  .btn-item {
    display: inline-block;
    width: 100px;
    height: 50px;
  }
</style>
